<template>
<div class="app-container">
  <h2 style="text-align: center;">发布新作品</h2>
  <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
    <el-step title="填写作品基本信息"/>
    <el-step title="填写作品内容"/>
    <el-step title="提交审核"/>
  </el-steps>
<el-form label-width="120px">

  <el-form-item label="作品标题" >
    <el-input v-model="courseInfo.title" placeholder=" 示例：JAVA从入门到入坟。"/>
  </el-form-item>

<!-- 所属分类：级联下拉列表 -->
<!-- 一级分类 -->
  <el-form-item label="频道">
    <el-select
      v-model="courseInfo.subjectParentId" placeholder="请选择" @change="subjectLevelChange">
      <el-option
        v-for="subject in subjectList"
        :key="subject.id"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>

<!-- 二级分类 -->
    <el-select v-model="courseInfo.subjectId" placeholder="请选择">
      <el-option
        v-for="subject in subjectNodeList"
        :key="subject.value"
        :label="subject.title"
        :value="subject.id"/>
    </el-select>
  </el-form-item>

  <!-- 漫画家 -->
  <el-form-item label="作者">
    <el-select
      v-model="courseInfo.teacherId"
      placeholder="请选择">
      <el-option
        v-for="teacher in teacherList"
        :key="teacher.id"
        :label="teacher.name"
        :value="teacher.id"/>
    </el-select>
  </el-form-item>

  <el-form-item label="总集数">
    <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写番剧的总集数数"/>
  </el-form-item>

<!-- 番剧简介-->
<el-form-item label="作品简介">
    <editor :height="200" v-model="courseInfo.description"/>
</el-form-item>
  <!-- 番剧封面-->
  <el-form-item label="作品封面">

    <el-upload
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :action="BASE_API+'/eduoss/fileoss'"
      class="avatar-uploader">
      <img :src="courseInfo.cover">
    </el-upload>

  </el-form-item>

  <el-form-item label="作品分级限制">
    <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="设置观看等级"/> 级
  </el-form-item>

  <el-form-item>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
  </el-form-item>
</el-form>

</div>
</template>

<script>
import course from '@/api/subject'
import Tinymce from '@/components/Tinymce'//引入富文本编辑器
export default {
  components: {//注册组件
			'editor': Tinymce
		},
  data() {
    return {
      saveBtnDisabled: false ,// 保存按钮是否禁用
      courseInfo:{
        title:'',
        subjectId:'',
        subjectParentId:'',
        teacherId:'',
        lessonNum:'',
        description:'',
        cover:'https://pilipili-1996.oss-cn-shanghai.aliyuncs.com/144.gif',
        price:0
      },
      BASE_API:process.env.VUE_APP_BASE_API,
      courseId:'',
      teacherList:[],
      subjectList:[],
      subjectNodeList:[],

    }
  },

  created() {
    if(this.$route.params && this.$route.params.id){
        this.courseId=this.$route.params.id
        this.getInfo()
    }else{
      this.courseInfo={
        cover:'https://pilipili-1996.oss-cn-shanghai.aliyuncs.com/144.gif',
        price:0
      },
      this.getAllTeacherList(),
      this.getAllSubjectListList()
    }
  },

  methods: {
    //获取所有作者列表
    getAllTeacherList(){
      course.getAllTeacher()
      .then(response => {
        this.teacherList=response.data.items
      })
    },
    //获取所有项目
    getAllSubjectListList(){
      course.getSubjectList()
      .then(response => {
        this.subjectList=response.data.list
      })
    },
    //根据番剧id查询信息
    getInfo(){
      course.getCourseInfo(this.courseId)
      .then(response => {
        this.courseInfo=response.data.courseInfo
        //查询所有并遍历,将符合的二级标题回显
        course.getSubjectList()
          .then(response=>{
            this.subjectList=response.data.list
            for(var i=0;i<this.subjectList.length;i++){
              if(this.subjectList[i].id==this.courseInfo.subjectParentId){
                this.subjectNodeList=this.subjectList[i].children
            }
          }
        })
        //重写初始化列表
        this.getAllTeacherList()
      })
    },
    //显示一级节点的所有子节点,修改父节点时清空
    subjectLevelChange(value){
      for(var i=0;i<this.subjectList.length;i++){
        if(this.subjectList[i].id===value){
          this.subjectNodeList=this.subjectList[i].children
          this.courseInfo.subjectId=''
        }
      }
    },
    save() {
      course.addCourseInfo(this.courseInfo)
      .then(response=>{
        this.$message({
          type:'success',
          message:'添加视频设置成功',
        })
        this.$router.push({ path: '/course/chapter/'+response.data.courseId })
      })
    },
    update() {
      course.updateCourseInfo(this.courseInfo)
      .then(response=>{
        this.$message({
          type:'success',
          message:'修改视频设置成功',
        })
        this.$router.push({ path: '/course/chapter/'+this.courseId })
      })
    },
    //保存到数据库后路由跳转
    saveOrUpdate() {
      if(!this.courseInfo.id){
        this.save()
      }else{
        this.update()
      }
    },
    //上传成功后返回图片链接
    handleAvatarSuccess(res,file){
      console.log(res)// 上传响应
      console.log(URL.createObjectURL(file.raw))// base64编码
      this.courseInfo.cover = res.data.url
    },
    //上传前限制图片格式和大小
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
